<template>
  <div class="flex flex-col">
    <div placeholder="搜索指标" style="margin-left:1em;margin-bottom: .5em;
        border-radius: 18px; position: relative; width:100%;">
        <a-input placeholder="搜索指标" v-model:value="searchConfigValue" size="large"
          class="searchStockCode" @pressEnter="onSearch">
          <template #prefix>
                <search-outlined />
              </template>
        </a-input>
    </div>
    <a-list item-layout="vertical" size="large" :data-source="columnList">
      <template #renderItem="{ item }">
        <a-list-item key="item.title" class="cursor-pointer">
            <a-checkbox :checked="item.checked" @change="checkboxChange(item)"></a-checkbox> &nbsp;&nbsp;{{item.title}}
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>
<script lang="ts">
import type { TableColumnsType } from 'ant-design-vue';
import { ref,defineComponent, onMounted } from 'vue';
import { SettingOutlined, SearchOutlined } from '@ant-design/icons-vue';

import { Input, Button, List, ListItem, Checkbox } from 'ant-design-vue';
export default {
  components: {
    AButton: Button,
    AInput: Input,
    AList: List,
    AListItem: ListItem,
    ACheckbox: Checkbox
  },
};
</script>

<script lang="ts" setup>
  const searchConfigValue = ref('');
  const $emit = defineEmits(['addOrRemoveCols']);
  const columnList = ref([]);
  import { getUserColumns,updateColumnChecked } from '/@/api/stock/userColumnsDao';
  import {getTableColumns} from '/@/api/stock/selfstock'
  import { getCurrentUserId } from '../../utils/currentUser.ts';

  onMounted(()=> {
    let columns = props.showlist?.concat(props.unshowlist)
    
    let configColumns = [];
    for(var i=0; i<columns.length; i++) {
      let column = columns[i];
      let key = column.key;
      if(key=='stock_name' || key=='close' 
        || key=='rise_and_fall' || key=='stock_code'
        || key =='config'|| !column['defaultSn']){
        continue;
      }
      if(!column['defaultSn']) {
        column['defaultSn'] = 1000
      }
      if(column.checked==1){
        column['tmpsortsn'] = column['defaultSn']-1000
      } else {
        column['tmpsortsn'] = column['defaultSn']
      }
      configColumns.push(column);
    }
    configColumns?.sort(function(a:any,b:any) {
      let an = a['tmpsortsn'];
      let bn = b['tmpsortsn'];
      return an - bn;
    });

    for(var column of configColumns) {
      console.log('column:', column.title)
    }
    columnList.value = configColumns
  });

  const props = defineProps({
      unshowlist:Array,
      showlist:Array
  });
  const columns:TableColumnsType = ref([]);

  function checkboxChange(item) {
    updateColumnChecked({},{
      "userId":getCurrentUserId(),
      "columnKey": item.key,
      "checked": item.checked==1 ? 0 : 1
    }).then((res)=>{
      item.checked = item.checked==1? 0 : 1;
      $emit('addOrRemoveCols',item);
    })
  }

  function onSearch() {
    columnList.value = props.unshowlist?.filter(item=>item.title.indexOf(searchConfigValue.value)>=0);
  }
  
</script>

<style scoped lang="less">
.searchStockCode {
  padding: 8px 0px !important;
  background: #f1f1f1;
  border-radius: 18px !important;
  border: 1px solid #ececec;
  width: 96%;
  text-indent: 1em;
}
:deep(.ant-input) {
  background-color:#f1f1f1 !important;
} 
</style>